<template>
    <div>

        <el-form :inline="true" ref="form" :model="form" label-width="66px" class="demo-form-inline">
            <el-form-item label="搜索:" prop="title">
                <el-input size="mini" placeholder="请输入名称" v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" size="mini">搜索</el-button>
            </el-form-item>

        </el-form>
        <el-row>
            <div class="btnlist">
                <div class="btnlist__item">
                    <PersButton type="primary" @click="editReadModule" size="mini" label="新建模块"
                        perms="kanke:textboox:module:add"></PersButton>
                </div>
                <div class="btnlist__item">
                    <PersButton type="danger" @click="batchEdit(1)" size="mini"
                        perms="kanke:textboox:module:add-to-read" label="添加模块至阅读区"></PersButton>
                </div>
                <div class="btnlist__item">
                    <PersButton type="primary" @click="batchEdit(2)" size="mini"
                        perms="kanke:textboox:module:add-to-read" label="添加模块至审核区"></PersButton>
                </div>
            </div>
        </el-row>
        <el-row v-loading="loading">
            <div v-if="showSelect" class="head">
                <el-button type="primary" @click="handleConfirmEdit(true)" size="mini">确定</el-button>
                <el-button @click="handleCloseSelect" size="mini">取消</el-button>
                <el-checkbox @change="handleCheckAllChange">全选 (已选
                    {{
                        checkList.length }} 条)</el-checkbox>
                <span> <span style="color: red">*</span> 点击确定将已选择的模块添加至阅读区</span>
            </div>
            <el-checkbox-group v-model="checkList">
                <div class="content" v-if="tableData.length">
                    <div class="content__item" v-for="(item, index) in tableData" :key="`${item.id}`">
                        <el-tag effect="dark" size="small" v-if="item.is_show == 1">阅读区</el-tag>
                        <el-checkbox v-if="showSelect && item.is_show == 0" :label="item.id"></el-checkbox>
                        <el-image style="width: 150px; height: 150px" :src="item.cover_url" :fit="fit"></el-image>
                        <span class="title">{{ item.title }}</span>
                        <div class="flex-container">
                            <PersButton size="small" @click="handleEditItem(item)" perms="kanke:textboox:module:edit"
                                label="编辑"></PersButton>
                            <PersButton size="small" @click="handleSortItem(item)" perms="kanke:textboox:module:sort"
                                label="排序"></PersButton>
                            <PersButton size="small" @click="handleDelItem(item)" perms="kanke:textboox:module:del"
                                label="删除"></PersButton>
                        </div>

                    </div>
                </div>
                <el-empty v-else description="暂无数据"></el-empty>
            </el-checkbox-group>
            <el-pagination v-if="tableData.length > 0" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :current-page="pageInfo.page" :page-sizes="pageSizes"
                :page-size="pageInfo.page_size" background layout="total, sizes, prev, pager, next, jumper"
                :total="pageInfo.total">
            </el-pagination>
            <!-- 添加 -->
            <AddReadModule v-if="dialogVisible" :dialogVisible.sync="dialogVisible" :module_id="0"
                @handleAddSuccess="handleAddSuccess" />
            <!-- 编辑 -->
            <EditReadModule v-if="dialogEditVisible" :dialogEditVisible.sync="dialogEditVisible" :id="id"
                @handleEditSuccess="handleEditSuccess" />
        </el-row>
    </div>

</template>
<script>
import { getList, updateSortNum, delReadModule, batchEditShow } from "@/api/kanke/textbook/read";
import { handleResize } from '@/constant/index';
import AddReadModule from './AddReadModule.vue'
import EditReadModule from './EditReadModule.vue'

export default {
    name: "KanKeTextbookReadModulePane",
    props: {
        type: {
            type: String,
            default: 'all'
        }
    },
    components: {
        AddReadModule,
        EditReadModule
    },
    data() {
        return {
            screenWidth: 0,
            loading: false,
            image: 'image',
            form: {
                title: ''
            },
            pageInfo: {
                page_size: 10,
                page: 1,
                total: 0
            },
            tableData: [],
            fit: 'contain',
            pageSizes: [],
            checkList: [],
            showSelect: false,
            dialogVisible: false,
            dialogEditVisible: false,
            id: 0,
            batchType: 0
        }
    },
    created() {
        this.init();
        // window.addEventListener('resize', this.handleResize);
    },
    destroyed() {
        // window.removeEventListener('resize', this.handleResize); // 移除监听器
    },
    computed: {
        class_id() {
            return this.$route.query.class_id
        },
        folder_id() {
            return this.$route.query.folder_id
        }
    },
    methods: {
        handleResize,
        init() {
            this.loading = true;
            this.screenWidth = window.innerWidth;
            let obj = this.handleResize();
            this.pageSizes = obj.pageSizes;
            if (this.pageInfo.page_size == 10) {
                this.pageInfo.page_size = obj.pageSize;
            }
            const params = {
                ...this.form,
                ...this.pageInfo,
                class_id: this.class_id,
                folder_id: this.folder_id,
                type: this.type
            };

            getList(params).then((res) => {
                this.tableData = res.data.list;
                this.pageInfo.total = res.data.total;
                this.loading = false;
            })
        },
        editReadModule() {
            this.dialogVisible = !this.dialogVisible;
        },
        handleEditItem(item) {
            this.dialogEditVisible = !this.dialogEditVisible;
            this.id = item.id;
        },
        handleAddSuccess() {
            this.dialogVisible = false
            this.init()
        },
        handleEditSuccess() {
            this.dialogEditVisible = false
            this.init()
        },
        handleDelItem(item) {
            this.$confirm('确定要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(() => {
                const params = {
                    id: item.id
                }
                delReadModule(params).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg)
                        this.init()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消删除'
                });
            });

        },
        handleConfirmEdit(isBatch = false, id = 0) {
            const idArr = isBatch ? this.checkList : [id]
            if (idArr.length == 0) {
                this.$message.warning('请选择要添加的模块')
                return;
            }
            if (isBatch && this.batchType == 0) {
                this.$message.warning('请选择要添加的模块')
                return;
            }
            const msg = this.batchType == 2 ? '确定要添加至审核区吗?' : '确定要添加至阅读区吗?'
            this.$confirm(msg, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(() => {
                const params = {
                    ids: [...idArr],
                    type: this.batchType
                }
                batchEditShow(params).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg)
                        this.showSelect = false;
                        this.checkList = [];
                        this.pageInfo.page = 1;
                        this.init()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消添加'
                });
            });

        },
        handleSortItem(item) {
            this.$prompt('请输入新的序号', '修改排序', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputValue: item.sort_num,
                inputPattern: /\d+/,
                inputErrorMessage: '序号不合法,仅支持数字'
            }).then(({ value }) => {
                const params = {
                    sort_num: value,
                    id: item.id,
                }
                updateSortNum(params).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg)
                        this.init()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消排序'
                });
            });

        },
        batchEdit(batchType) {
            this.batchType = batchType
            this.showSelect = true
        },
        handleCloseSelect() {
            this.showSelect = false
        },
        handleCheckAllChange(val) {
            const checkList = [];
            for (let i = 0; i < this.tableData.length; i++) {
                if (this.tableData[i].is_show == 1) {
                    continue;
                }
                checkList.push(this.tableData[i].id);
            }
            this.checkList = val ? checkList : [];
        },
        search() {
            this.init()
        },
        handleSizeChange: function (e) {
            console.log(e);
            this.pageInfo.page_size = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            console.log(e);
            this.pageInfo.page = e;
            this.init();
        }
    }

}
</script>
<style lang="scss" scoped>
@import "@/styles/abstract/mixins.scss";

.btnlist {

    padding: 5px 20px;

    &__item {
        display: inline-block;
        margin-right: 25px;
        float: right;
    }

}

.head {
    padding: 5px 20px;

    :nth-child(2) {
        margin-right: 20px;
    }

}

.content {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    margin-bottom: 15px;
    min-height: 700px;

    &__item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 20px;
        padding: 15px 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 14px;

        ::v-deep .el-checkbox__label {
            display: none;
        }

        ::v-deep .el-checkbox {
            font-size: 11px;
        }


        .el-tag {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;

        }

        .title {
            width: 140px;
            max-height: 48px;
            line-height: 16px;
            margin: 10px 0;
            word-break: break-word;
            white-space: normal;
            @include line-clamp(3);
        }

        .el-button {
            width: 50px;
        }

        .flex-container {
            display: flex;
        }

        .flex-container el-button {
            margin-right: 10px;
        }

        .el-checkbox {
            position: absolute;
            top: 0;
            right: 0;
        }
    }
}
</style>